<script setup>
import { ref, inject, watch, onBeforeUnmount } from 'vue'
import { CityBuildingLayer, LineLayer } from '@antv/l7'
import axios from 'axios'
// 图层管理函数
import { useCityLayers } from '@/composable/useCityLayers.js'

const { map, scene } = inject('mapScene')
let createdBuildingLayer = null // 记录已经创建的建筑图层实例
let createdRoadsLayer = null // 记录已经创建的道路图层实例
// 更新图层管理模块的图层状态数据
const { updateLayerList } = useCityLayers()
// 监听map和scene是否存在
watch(
  [map, scene],
  async ([newMap, newScene]) => {
    if (newMap && newScene) {
      newMap.flyTo({
        center: [114.3055, 30.5928], // 武汉市中心坐标 [经度, 纬度]
        zoom: 11,
        pitch: 60,
        bearing: -20,
      })
    }
    // 等待所有图层添加完成
    const [bLayer, rLayer] = await Promise.all([
      addBuildingLayers(newScene),
      addRoadsLayer(newScene),
    ])

    // 当上述图层加载完毕后，更新图层管理模块的图层状态数据
    updateLayerList(newScene)
  },
  { immediate: true },
)

/**
 *   Resources
  http://localhost:3001/Wuhan_buildings
  http://localhost:3001/Wuhan_roads
  http://localhost:3001/Wuhan_bridge
  http://localhost:3001/Wuhan_events
 */

// 添加建筑图层
async function addBuildingLayers(scene) {
  if (!scene) return
  if (createdBuildingLayer) return // 如果已经创建过图层，就不重复创建
  const res = await axios.get('http://localhost:3001/Wuhan_buildings')
  const buildingLayer = new CityBuildingLayer({
    zIndex: 1,
    name: 'building',
  })
  buildingLayer
    .source(res.data, {
      parser: {
        type: 'geojson',
      },
    })
    .filter('Elevation', (e) => e > 50)
    .size('Elevation') // 根据 Elevation 字段高度
    .color('#aaaaff') // 固定颜色
    // 开启 animate 动画是打开扫光动画的前提
    .animate({
      enable: true,
    })
    .active(true)
    .style({
      opacity: 0.8,
      // 圆形扫光扩散动画相关配置项
      sweep: {
        enable: true,
        sweepRadius: 2,
        sweepColor: '#1990FF',
        sweepSpeed: 0.5,
        sweepCenter: [114.3055, 30.5928],
      },
    })
  scene.addLayer(buildingLayer)
  createdBuildingLayer = buildingLayer
  return buildingLayer
}

// 添加道路图层
async function addRoadsLayer(scene) {
  if (!scene) return
  if (createdRoadsLayer) return // 如果已经创建过图层，就不重复创建
  const res = await axios.get('http://localhost:3001/Wuhan_roads')
  const roadsLayer = new LineLayer({
    name: 'roads',
  })
  roadsLayer
    .source(res.data)
    .size(1) // 线宽
    .texture('arrow') // 贴图
    .color('type', (type) => {
      if (type === 'trunk') return 'rgb(255,0,0)'
      if (type === 'primary') return 'rgb(0,255,0)'
      if (type === 'secondary') return 'rgb(0,0,255)'
      if (type === 'tertiary') return 'rgb(255,255,0)'
      if (type === 'residential') return 'rgb(255,165,0)'
      if (type === 'construction') return 'rgb(128,128,128)'
      if (type === 'motorway') return 'rgb(0,255,255)'
      return 'rgb(255,255,255)'
    })
    .animate({
      interval: 1, // 间隔
      duration: 1, // 持续时间，延时
      trailLength: 2, // 流线长度
    })
    .style({
      opacity: 0.6,
      lineTexture: true, // 开启线的贴图功能
      iconStep: 10, // 设置贴图纹理的间距
      borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
      borderColor: '#fff', // 默认为 #ccc
    })
  scene.addLayer(roadsLayer)
  createdRoadsLayer = roadsLayer
  return roadsLayer
}

onBeforeUnmount(() => {
  // 离开页面时，可以选择移除图层
  scene.value.removeAllLayer()
  updateLayerList(scene.value)
})
</script>

<template>
  <div>
    <h1>City View</h1>
  </div>
</template>

<style scoped></style>
